let form = layui.form
// 设置下拉选框
$.get('/my/article/cates', function (res) {
  if (res.status !== 0) {
    return layer.msg('获取文章分类失败！')
  }
  console.log(res);
  let htmlStr = template('selectArtCates', res)
  $('#art_cate').html(htmlStr)
  form.render()
})

// 添加富文本编辑器
initEditor()

// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
}
// 点击选取图片时, 触发file点击
$('#btnChooseCoverImage').on('click', function () {
  $('input[type=file]').trigger('click')
})

// 1.3 创建裁剪区域
$('#image').cropper(options);
// 当file改变时触发
$('input[type=file]').on('change', function (e) {
  // files是原生dom方法, 获取的是个集合,当选中多个时选择第一个图片
  let file = this.files[0];
  // 创建临时图片url路径
  let newImgURL = URL.createObjectURL(file)

  $('#image')
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newImgURL)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域
})

$('form').on('submit', function (ev) {
  ev.preventDefault()
  // 因为接口文档要求需要传入FormData格式数据
  let fd = new FormData(this)

  // set可以覆盖原来的内容
  // 获取tinymce插件的内容，并把内容添加到FormData对象中
  fd.set('content', tinyMCE.activeEditor.getContent())
  // 裁剪图片, 得到canvas
  let canvas = $('#image').cropper('getCroppedCanvas', {
    width: 400,
    height: 280
  })
  // 把canvas图片转成blob格式
  canvas.toBlob(function (blob) {
    // 形参 blob 就是转换后的结果，需要把它也追加到FormData中
    fd.append('cover_img', blob)
    // 查看FormData内容的方法 (内容, name名)
    fd.forEach((value, key) => {
      console.log(key, value);
    })

    $.ajax({
      url: '/my/article/add',
      type: 'post',
      data: fd,
      // 提交FormData格式的数据，必须填下面两项
      processData: false,
      contentType: false,
      success: function (res) {
        layer.msg(res.message)
        if (res.status === 0) {
          // 添加成功，跳转到文章列表页
          location.href = './article-lists.html'
        }
      }
    })
  })
})